<template>
    <div class="tab-title-page goods_list">
      <div class="common_form_search">
        <el-form ref="searchForm" :inline="true" :model="searchForm">
          <el-form-item label="手机号">
            <el-input v-model="searchForm.mobile" placeholder="请输入手机号码" clearable />
          </el-form-item>
          <el-form-item label="下单时间">
            <my-date-picker ref="myDatePicker" />
          </el-form-item>
          <el-form-item label="处理状态">
            <el-select v-model="searchForm.status" placeholder="全部" clearable>
              <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="客服">
            <el-input v-model="searchForm.username" placeholder="请输入客服姓名" clearable />
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="search()">查询</el-button>
            <el-button size="small" @click="reset()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-divider class="middle_divider" />
      <div class="child_page">
        <div class="flex align-center table-top-btns">
          <h5 class="flex align-center">
            <svg-icon style="margin-right: 15px" icon-class="list" :size="15" />数据列表
          </h5>
          <el-button icon="el-icon-edit" size="small" type="success" @click="add()">添加</el-button>
        </div>
        <el-table :data="tableData" border :row-class-name="rowStyle" v-show="tableData.length > -1">
          <el-table-column align="center" prop="id" label="ID" width="50"/>
          <el-table-column align="center" prop="corporate_tool_id" label="主播" width="100"/>
          <el-table-column align="center" prop="name" label="姓名" width="80"/>
          <el-table-column align="center" prop="mobile" label="手机号码" width="150"/>
          <el-table-column align="center" prop="location" label="城市" width="120"/>
          <el-table-column align="center" prop="flow_type" label="流量类型" width="100"/>
          <el-table-column align="center" prop="clue_source" label="线索渠道" width="100"/>
          <el-table-column align="center" prop="update_time" label="创建时间"  width="180"/>
          <el-table-column align="center" prop="order_status" label="订单状态"  width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.order_status=='未下单'"><el-tag type="danger">{{scope.row.order_status}}</el-tag></span>
              <span v-else><el-tag>{{scope.row.order_status}}</el-tag></span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="remark" label="处理状态" />
          <el-table-column align="center" prop="username" label="操作客服" />
          <el-table-column align="center" fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleRemark(scope.row.id)">添加跟进</el-button>
              <el-button size="mini" type="warning" @click="handleLook(scope.row.id)">查看备注</el-button>
            </template>
          </el-table-column>
        </el-table>
        <custom-page ref="customPage" :total="total" :page-size="pageSize" @getList="getList" />
      </div>
      <add-clue ref="addClue" @getList="getList"></add-clue>
			<add-remark ref="addRemark" :type-list="typeList" :order-id="id" @getList="getList"></add-remark>
      <get-remark ref="getRemark" :order-id="id"></get-remark>
    </div>
  </template>
  
  <script>
  import { getDouyinClue,getDouyinRemarkStatus,getDouyinClueRemark } from '@/api/data'
  import customPage from '@/components/customPage'
  import myDatePicker from '@/components/myDatePicker'
  import addClue from './components/addClue'
  import addRemark from './components/addRemark'
  import getRemark from './components/getRemark'
  export default {
    components: { customPage, myDatePicker,addClue,addRemark,getRemark },
    data() {
      return {
        searchForm: {
            mobile: '',
            create_time: '',
            status:'',
            username:''
        },
        count: {
          no_settle: 0,
          settled: 0,
          refuse_settle: 0
        },
        selectedId:'',
        statusList: [
          { value: 1, label: '同步成功' },
          { value: 2, label: '未同步' },
          { value: 3, label: '未选号' }
        ],
        total: 0,
        tableData: [],
				id:'',
        typeList:[],
        pageSize:50
      }
    },
    methods: {
      handleCurrentChange(e){
        console.log(e);
      },
			// 添加备注
			handleRemark(id){
				this.id=id
				this.$refs.addRemark.dialogVisible = true
			},
      // 查看备注
      handleLook(id){
        this.id=id
				this.$refs.getRemark.dialogVisible = true
      },
      // 获取数据
      getList(flag) {
        this.typeList=[]
        // flag为true, 则不刷新表格
        const { page, pageSize } = this.$refs.customPage
        if (!flag) {
          this.tableData = []
        }
        getDouyinClue({
            page,
            pageSize:'50',
          ...this.searchForm,
        }).then((res) => {
        console.log(res);
          this.tableData = res.data || []
          this.total = res.total
        })
        getDouyinRemarkStatus().then(res=>{
          for (let index = 0; index < Object.values(res).length; index++) {
            this.typeList.push({
              id:index+2,
              name:Object.values(res)[index]
            })
            
          }
        })
      },
			// 添加
			add(){
				this.$refs.addClue.dialogVisible = true
			},
      // 查询
      search() {
        const pickerVal_start = this.$refs.myDatePicker.getVal()
        if (pickerVal_start !== 'error') {
          this.searchForm.create_time = pickerVal_start
        }
        this.$refs.customPage.page = 1
        this.getList()
      },
      // 重置
      reset() {
        if (this.$refs.myDatePicker) {
          this.$refs.myDatePicker.reset()
        }
        this.searchForm = {
          order_id: '',
          certName: '',
          certId: '',
          goods: '',
        }
        this.getList()
      },
    },
    mounted() {
      this.getList()
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .el-button--warning.is-plain {
    color: #ff9f38;
    background: #fff;
    border-color: #ff9f38;
  }
  
  .el-icon-upload2 {
    font-size: 18px;
  }
  
  .dialog {
    text-align: center;
  }
  
  .goods_info {
    .info {
      margin-left: 10px;
  
      p {
        color: #666666;
      }
  
      p:first-child {
        color: #999999;
      }
    }
  }
  
  .activity {
    line-height: 24px;
  
    span {
      width: 20px;
      height: 20px;
      margin-left: 10px;
    }
  }
  
  .child_page {
    padding: 30px;
  }
  
  .common_form_search {
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #ffffff;
    border-bottom: 1px solid #eeeeee;
  }
  </style>
  